<template>
  <div>
    <div class="class-entrance-container">
      <div class="sequence-number">{{ getSequenceNumber }}</div>
      <div class="config-name" @click="readPDF">{{ info.coursewareName }}</div>
      <!--    <pdf src="/asset/test1.pdf"></pdf>-->
      <div class="config-btn-container">
        <a-button style="color: #7657F0" type="link" v-show="info.hasDownloaded">已下载</a-button>
        <a-button style="color: #1BD0A2" type="link" @click="downloadCourse">下载</a-button>
      </div>
    </div>
    <el-dialog
      title="文件预览"
      :visible.sync="centerDialogVisible"
      width="1500px"
      height="1200px"
      center>
      <span>
        <iframe
          frameborder="0" style="width:100%; height:800px;" scrolling="no" title="preview"
          ref="img" ></iframe >
      </span>
    </el-dialog>
  </div>


</template>

<script>
/* eslint-disable */
import api from "../../../../common/api";
import { getToken } from "../../../../common/store";


export default {
  name: "ClassEntrance",
  props: {
    sequenceNumber: {
      type: Number,
      default: 0
    },
    info: {
      type: Object,
      default: {
        id: 1,
        coursewareName: "try尝试.txt",
        hasDownload: false,
      }
    }
  },
  data() {
    return {
      centerDialogVisible:false,
      baseUrl:"http://106.14.139.101:8080/train/file/",
      authSrc:"http://106.14.139.101:8080/train/file/FoodScrap Promoting Rich Data Capture and Reflective Food Journaling Through Speech Input.pdf",

    };
  },
  components: {

  },
  computed: {
    getSequenceNumber() {
      return this.sequenceNumber + 1;
    }

  },
  methods: {
    readPDF(){
      console.log("read")
      this.centerDialogVisible=true
      this.$nextTick(() => {
        this.getImgSrcByToken()
      });
    },
    // 携带token请求img的src
    getImgSrcByToken() {
      let token = getToken();
      // Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象
      Object.defineProperty(Image.prototype, 'authSrc', {
        // 可写
        writable: true,
        // 可枚举
        enumerable: true,
        // 若configurable设为false，那就不可以delete了
        configurable: true
      });
      let img = this.$refs.img;
      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      let tempUrl=this.baseUrl+this.info.coursewareName
      request.open('get', tempUrl, true);
      request.setRequestHeader('token', token);
      request.setRequestHeader("Authorization","Bearer " + token)
      request.onreadystatechange=e => {
        if(request.readyState == XMLHttpRequest.DONE && request.status == 200) {
          // URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象URL，这个新的URL对象表示指定的File对象或blob对象
          img.src = URL.createObjectURL(request.response);
          img.onload = () => {
            // 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。
            URL.revokeObjectURL(img.src);
          }
        }
      };
      request.send(null);
    },
    downloadCourse() {
      let str = this.info.id
      // console.log("download file id:",str)
      this.$downLoadFileCPG(api.downloadCourse, {coursewareId: str}
      ).then(res => {
        this.$emit('downloaded', str)
        const blob = new Blob([res], {
          // 创建一个新的Blob对象来接收后端的文件,这里第一个参数必须是数组类型
          type: 'application/octet-stream'
          // type，表明该 Blob 对象所包含数据的 MIME 类型,这需要前后端统一规划
        })
        let link = document.createElement('a')
        let body = document.querySelector('body')
        // 创建一个下载文件的URL，它指向blob，因为Blob对象在之前在接收后端发来的文件流信息。因为是Blob对象，所以不会跳转页面
        link.href = window.URL.createObjectURL(blob)

        // 以后还有新增的东西的话再加
        link.download = this.info.coursewareName // 自己制定下载文件的文件名
        // 兼容火狐浏览器
        link.style.display = 'none'	// 让这个a标签不可见
        body.appendChild(link)
        link.click()	// 创建了新的a标签之后模拟点击事件，开始传输文件
        body.removeChild(link)	// 下载完成之后，移除按钮，垃圾回收，减少页面内存消耗
        window.URL.revokeObjectURL(link.href)	// 移除之前使用createObjectURL创建的URL，垃圾回收

      }).catch(err => {
        console.log(err)
      })
      //下载量+1
      this.$getCPG(api.downloadAddOne,{
        coursewareId:this.info.id
      }).then(res => {
          if (res.code === 200) {
            console.log(res)
          }
        }
      ).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>

.class-entrance-container {
  background-color: #f4f4f5;
  padding: 12px 15px;
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  &:hover {
    transition: all 0.2s linear;
    background-color: #E5E5E5;
  }

  .sequence-number {
    background-color: #1BD0A2;
    min-height: 22px;
    min-width: 22px;
    border-radius: 22px;
    color: white;
    text-align: center;
    padding: 1px;
  }

  .config-name {
    margin-left: 10px;
    flex: 1;
    font-size: 14px;

  }

  .config-btn-container {
    display: flex;

    .config-btn:hover {
      cursor: pointer;
      opacity: 0.8;
    }

  }
}
</style>
